コンテキストメニューをカスタマイズする新しい方法

コンテンツ

まとめ

コンテキストメニュー、またはテキスト選択ツールバーは、長い場合に表示されるメニューです。 Flutter のテキストを押すか右クリックすると、次のようなオプションが表示されます。切る、コピー、ペースト、とすべて選択。以前は、を使用してそれらを厳密にカスタマイズすることが可能ToolbarOptionsとTextSelectionControls。現在は、ウィジェットを使用して構成可能になっています。 Flutter の他のすべてと同様、特定の設定パラメータには廃止されました。

コンテクスト

以前は、次を使用してコンテキストメニューのボタンを無効にすることができました。TextSelectionControlsただし、それを超えるカスタマイズにはコピーとフレームワーク内の数百行のカスタムクラスを編集します。さて、これらすべて単純なビルダー関数に置き換えられました。contextMenuBuilder、どれの任意の Flutter ウィジェットをコンテキストメニューとして使用できるようにします。

変更内容の説明

コンテキストメニューは、contextMenuBuilderパラメータには、すべてのテキスト編集ウィジェットとテキスト選択ウィジェットに追加されました。そうでない場合提供されている場合、Flutter はそれを正しいコンテキストを構築するデフォルトに設定するだけです。特定のプラットフォームのメニュー。これらのデフォルトのウィジェットはすべてユーザーに公開されます再利用のために。コンテキストメニューのカスタマイズは、次のようになります。contextMenuBuilder必要なウィジェットを返します。おそらく組み込みのウィジェットの再利用も含まれます。コンテキストメニューウィジェット。

を追加する方法を示す例は次のとおりです。メールを送るボタンをデフォルトに戻す電子メールアドレスが選択されるたびにコンテキストメニューが表示されます。完全なコードは見つかりますサンプルリポジトリ内email_button_page.dartGitHub 上で。

TextField(
  contextMenuBuilder: (context, editableTextState) {
    final TextEditingValue value = editableTextState.textEditingValue;
    final List<ContextMenuButtonItem> buttonItems =
        editableTextState.contextMenuButtonItems;
    if (isValidEmail(value.selection.textInside(value.text))) {
      buttonItems.insert(
          0,
          ContextMenuButtonItem(
            label: 'Send email',
            onPressed: () {
              ContextMenuController.removeAny();
              Navigator.of(context).push(_showDialog(context));
            },
          ));
    }
    return AdaptiveTextSelectionToolbar.buttonItems(
      anchors: editableTextState.contextMenuAnchors,
      buttonItems: buttonItems,
    );
  },
)

さまざまなカスタムコンテキストメニューの例が多数用意されています。サンプルリポジトリ内GitHub 上で。

関連するすべての非推奨機能には、非推奨の警告「使用してください」というフラグが付けられました。contextMenuBuilderその代わり。"

移行ガイド

一般に、コンテキストメニューに対する以前の変更は現在非推奨になっています。の使用が必要ですcontextMenuBuilder関連するパラメータテキスト編集またはテキスト選択ウィジェット (の上TextField、例えば）。次のような組み込みコンテキストメニューウィジェットを返します。AdaptiveTextSelectionToolbarFlutter の組み込みコンテキストメニューを使用するか、何かのために独自のウィジェットを返す完全にカスタム。

移行するにはcontextMenuBuilder、次のパラメータとクラスには廃止されました。

`ToolbarOptions`

このクラスは、以前は特定のボタンを明示的に有効または無効にするために使用されていました。コンテキストメニューで。この変更の前に、それを次のように渡していた可能性があります。TextFieldまたは次のような他のウィジェット:

// Deprecated.
TextField(
  toolbarOptions: ToolbarOptions(
    copy: true,
  ),
)

ここで、buttonItemsに渡されましたAdaptiveTextSelectionToolbar。たとえば、次のことを保証できます。切るボタンは表示されませんが、他のボタンは通常どおり表示されます。

TextField(
  contextMenuBuilder: (context, editableTextState) {
    final List<ContextMenuButtonItem> buttonItems =
        editableTextState.contextMenuButtonItems;
    buttonItems.removeWhere((ContextMenuButtonItem buttonItem) {
      return buttonItem.type == ContextMenuButtonType.cut;
    });
    return AdaptiveTextSelectionToolbar.buttonItems(
      anchors: editableTextState.contextMenuAnchors,
      buttonItems: buttonItems,
    );
  },
)

または、切るボタンは常に排他的に表示されます。

TextField(
  contextMenuBuilder: (context, editableTextState) {
    return AdaptiveTextSelectionToolbar.buttonItems(
      anchors: editableTextState.contextMenuAnchors,
      buttonItems: <ContextMenuButtonItem>[
        ContextMenuButtonItem(
          onPressed: () {
            editableTextState.cutSelection(SelectionChangedCause.toolbar);
          },
          type: ContextMenuButtonType.cut,
        ),
      ],
    );
  },
)

`TextSelectionControls.canCut`およびその他のボタンのブール値

これらのブール値は以前は、特定の機能を有効または無効にするのと同じ効果がありました。ボタンとしてToolbarOptions.cut、などがありました。この変更が行われる前は、次のことが考えられます。オーバーライドすることでボタンを非表示にしたり表示したりしていますTextSelectionControlsとこれらのブール値を次のように設定します。

// Deprecated.
class _MyMaterialTextSelectionControls extends MaterialTextSelectionControls {
  @override
  bool canCut() => false,
}

前のセクションを参照してくださいToolbarOptions同様の効果を達成する方法についてはとcontextMenuBuilder。

`TextSelectionControls.handleCut`およびその他のボタンのコールバック

これらの関数により、ボタンが押されたときに呼び出されるコールバックの変更が可能になりました。押し付けられました。この変更が行われる前は、コンテキストメニューを変更していた可能性があります。ボタンのコールバックは、次のようにこれらのハンドラーメソッドをオーバーライドして実行します。

// Deprecated.
class _MyMaterialTextSelectionControls extends MaterialTextSelectionControls {
  @override
  bool handleCut() {
    // My custom cut implementation here.
  },
}

これは引き続き使用できますcontextMenuBuilder、通話も含めてツールバーを使用して、カスタムハンドラーでの元のボタンのアクションを表示するのようなウィジェットAdaptiveTextSelectionToolbar.buttonItems。

この例では、コピーダイアログを表示するボタン通常のコピーロジックを実行します。

TextField(
  contextMenuBuilder: (BuildContext context, EditableTextState editableTextState) {
    final List<ContextMenuButtonItem> buttonItems =
        editableTextState.contextMenuButtonItems;
    final int copyButtonIndex = buttonItems.indexWhere(
      (ContextMenuButtonItem buttonItem) {
        return buttonItem.type == ContextMenuButtonType.copy;
      },
    );
    if (copyButtonIndex >= 0) {
      final ContextMenuButtonItem copyButtonItem =
          buttonItems[copyButtonIndex];
      buttonItems[copyButtonIndex] = copyButtonItem.copyWith(
        onPressed: () {
          copyButtonItem.onPressed();
          Navigator.of(context).push(
            DialogRoute<void>(
              context: context,
              builder: (BuildContext context) =>
                const AlertDialog(
                  title: Text('Copied, but also showed this dialog.'),
                ),
            );
          )
        },
      );
    }
    return AdaptiveTextSelectionToolbar.buttonItems(
      anchors: editableTextState.contextMenuAnchors,
      buttonItems: buttonItems,
    );
  },
)

組み込みのコンテキストメニューアクションを変更する完全な例は、次の場所にあります。サンプルリポジトリ修正済み_アクション_ページ.dartGitHub 上で。

`buildToolbar`

この関数は、次と同様のコンテキストメニューウィジェットを生成しました。contextMenuBuilder, ただし、使用するにはさらにセットアップが必要でした。この変更が行われる前は、上書きされていたかもしれないbuildToolbarの一部としてTextSelectionControls、このような：

// Deprecated.
class _MyMaterialTextSelectionControls extends MaterialTextSelectionControls {
  @override
  Widget buildToolbar(
    BuildContext context,
    Rect globalEditableRegion,
    double textLineHeight,
    Offset selectionMidpoint,
    List<TextSelectionPoint> endpoints,
    TextSelectionDelegate delegate,
    ClipboardStatusNotifier clipboardStatus,
    Offset lastSecondaryTapDownPosition,
  ) {
    return _MyCustomToolbar();
  },
}

これで、簡単に使用できます13d33d13-184c-4598-90ff-8c5124398蜂パラメータとして直接TextField（その他）。パラメータで提供される情報は、buildToolbarから取得できますEditableTextStateそれが渡されるcontextMenuBuilder。

次の例は、完全にカスタムのツールバーを最初から構築する方法を示しています。デフォルトのボタンを使用したままです。

class _MyContextMenu extends StatelessWidget {
  const _MyContextMenu({
    required this.anchor,
    required this.children,
  });

  final Offset anchor;
  final List<Widget> children;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Positioned(
          top: anchor.dy,
          left: anchor.dx,
          child: Container(
            width: 200,
            height: 200,
            color: Colors.amberAccent,
            child: Column(
              children: children,
            ),
          ),
        ),
      ],
    );
  }
}

class _MyTextField extends StatelessWidget {
  const _MyTextField();

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _controller,
      maxLines: 4,
      minLines: 2,
      contextMenuBuilder: (context, editableTextState) {
        return _MyContextMenu(
          anchor: editableTextState.contextMenuAnchors.primaryAnchor,
          children: AdaptiveTextSelectionToolbar.getAdaptiveButtons(
            context,
            editableTextState.contextMenuButtonItems,
          ).toList(),
        );
      },
    );
  }
}

カスタムコンテキストメニューを構築する完全な例は、サンプルにあります。リポジトリのcustom_menu_page.dartGitHub 上で。

タイムライン

リリースされたバージョン: 3.6.0-0.0.pre
安定版リリース: 3.7.0

参考文献

API ドキュメント:

TextField.contextMenuBuilder
AdaptiveTextSelectionToolbar

まとめ

コンテクスト

変更内容の説明

移行ガイド

ToolbarOptions

TextSelectionControls.canCutおよびその他のボタンのブール値

TextSelectionControls.handleCutおよびその他のボタンのコールバック

buildToolbar